import React, { Component } from 'react'
import { TextDeletionOutline, RightOutline } from 'antd-mobile-icons'
import { Dialog } from "antd-mobile";
import MyTabbar from '../../components/MyTabbar'
import { getUsermsg } from '@api'
import { getToken } from '@utils/token.js'
import { store } from '../../store/index'
import './index.scss'
import gwc from '@assets/img/gwc.png'
import dd from '@assets/img/dd.png'
import sc from '@assets/img/sc.png'
import shdz from '@assets/img/shdz.png'

export default class User extends Component {
  state = {
    userInfo: {}
  }
  render() {
    console.log(this.props, 'User');
    return (
      <div className='sc_user'>
        <div className='sc_uh clearfix'>
          <div className='sc_uha' onClick={this.logOut}>
            <TextDeletionOutline color='#fff' />
          </div>
          <div className='sc_uhb clearfix'>
            <div className='sc_uhbl' >
              <img src={this.state.userInfo.avatarUrl} alt='' />
            </div>
            <div className='sc_uhbm'>
              <div className='sc_uhbma'>
                {this.state.userInfo.nick}
              </div>
              <div className='sc_uhbmb'>
                用户名：{this.state.userInfo.username}
              </div>
              <div className='sc_uhbmc'>
                微信号：{this.state.userInfo.wx}
              </div>
            </div>
            <div className='sc_uhbr'>
              <RightOutline color='#fff' onClick={this.goSetuser} />
            </div>
          </div>
        </div>
        <div className='sc_urouter'>
          <ul className='clearfix'>
            <li onClick={() => this.props.history.push('/cart')}>
              <div className='li_img'>
                <img src={gwc} alt='' />
              </div>
              <div className='li_name'> 购物车 </div>
            </li>
            <li onClick={() => this.props.history.push('/favor')}>
              <div className='li_img'>
                <img src={sc} alt='' />
              </div>
              <div className='li_name'> 收藏夹 </div>
            </li>
            <li onClick={() => this.props.history.push('/order')}>
              <div className='li_img'>
                <img src={dd} alt='' />
              </div>
              <div className='li_name'> 订单页 </div>
            </li>
            <li onClick={() => this.props.history.push('/areas')}>
              <div className='li_img'>
                <img src={shdz} alt='' />
              </div>
              <div className='li_name'> 收货地址 </div>
            </li>
          </ul>
        </div>
        <div className='sc_uguess'> </div>
        <MyTabbar pathname={this.props.location.pathname}></MyTabbar>
      </div>
    )
  }
  componentDidMount() {
    this.getUsermsg()
  }
  componentWillUnmount() {
    this.setState = () => false;
  }
  // 去修改用户信息页
  goSetuser = () => {
    this.props.history.push('/setuser')
  }
  // 获取用户信息
  getUsermsg = () => {
    getUsermsg({
      token: getToken()
    }).then((res) => {
      if (res.data.code === 0) {
        this.setState({
          userInfo: res.data.data.base
        })
      }
    })
  }
  // 退出
  logOut = () => {
    Dialog.confirm({
      content: '是否退出？',
      onConfirm: () => {
        localStorage.setItem('token', '')
        store.dispatch({ type: 'allnumber', data: 0 })
        this.props.history.push('/login')
      },
    })
  }

}
